<style lang="scss" scoped>

</style>

<template>
  <el-table 
    :data="baseinfo" 
    border
    style="width: 100%"
    height="calc(100vh - 120px)"
  >
    <el-table-column prop="id" label="ID" width="70"  />
    <el-table-column prop="cip" width="220" >
      <template #header>
        <el-input
          @change="getData"
          clearable
          v-model="pageInfo.ciplike" placeholder="请求IP [可过滤]" />
      </template>
    </el-table-column>
    <el-table-column prop="action" width="220" >
      <template #header>
        <el-input
          @change="getData"
          clearable
          v-model="pageInfo.actionlike" placeholder="请求地址 [可过滤]" />
      </template>
    </el-table-column>
    <el-table-column prop="cid" label="城市代码" width="100"  />
    <el-table-column label="UA">
      <template #default="{ row:{ua}}">
        <el-popover
          placement="top-start"
          title="用户UA"
          :width="300"
          trigger="hover"
          :show-after="500"
          :content="ua"
        >
          <template #reference>
            <p class=" cursor-pointer">{{ua}}</p>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="请求时间" width="220" :formatter="({createtime})=>dateFormat(createtime)"  />
  </el-table>
  <el-pagination
    v-model:currentPage="pageInfo.page"
    v-model:page-size="pageInfo.size"
    :page-sizes="[5,15,20,50]"
    background
    :layout="`total, sizes${pageInfo.total>pageInfo.size?', prev, pager, next, jumper':''} `"
    :total="pageInfo.total"
    @size-change="getData"
    @current-change="getData"
  />

</template>

<script lang="ts" setup >
import { reactive, toRefs } from '@vue/reactivity'
import { computed, onBeforeMount } from '@vue/runtime-core'
import { getLog } from 'api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getWarnHtmlStr,dateFormat } from 'utils/funcs'
import { useStore } from 'vuex'
import { Edit,Pointer,Delete, Warning } from '@element-plus/icons-vue'
import { clone, cloneDeep } from 'lodash'
import { useRouter } from 'vue-router'

const data = reactive({
  baseinfo:[],
  pageInfo:{
    ciplike:'',
    actionlike:'',
    size:15,
    page:1,
    total:0
  }
})

const store = useStore()

const getData = async () => {
  const { total,baseinfo } = await getLog(data.pageInfo)
  Object.assign(data,{baseinfo})
  data.pageInfo.total = total
}

const { baseinfo,pageInfo } = { ...toRefs(data) }

onBeforeMount(()=>{
  getData()
})

</script>